<template>
  <div class="mulu_box content-box">
    <div class="swiper_box">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in brand_hall" :key="index">
          <img @click="handimg" :src="item.banner">
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <div class="video_box">
      <div class="video_content">
        <div class="video_nav" v-for="(item, index) in video" :key="index" @click="handlevideo(item)">
          <div class="video_nav_top">
            <span class="play"></span>
            <img :src="item.cover_img" alt="视频没找到">
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <!-- 折叠面板 -->
    <div class="coll_box">
      <ul>
        <li class="cell_tab" v-for="(item,index) in catalog_content" :key="index">
          <div class="open" :id="'celltab_' + index" @click="open(item,index)">
            <h1>{{item.title}}<span></span></h1>
            <div class="zhankai" v-if="!item.openFlag">展开<span></span></div>
            <div class="shousuo" v-else>收缩<span></span></div>
          </div>
          <p :class="!item.openFlag ? 'p h208' : 'p h_auto'" ref="liCon" v-html="item.content" @click="handimg">{{item.content}}</p>
          <div v-if="!item.openFlag" class="mask" @click="open(item,index)"><span></span></div>
        </li>
      </ul>
    </div>

    <mt-button class="mulu_btn" @click="showRight = true"  color="light" ><span></span>目录</mt-button>
    <common-drawer
      v-if="showRight"
      position="right"
      :open.sync="showRight"
      :data="catalog"
      :close-by-out-side-click="true"
      @isflag="handleisflag">
      <p class="mulu"><span @click="showRight = false" class="mulu_close"></span>目录</p>
    </common-drawer>

    <!-- <div class="empty"></div> -->
    <wx/>
  </div>
</template>

<script>
import Vue from 'vue'
// import {mapMutations, mapGetters, mapState} from 'vuex'
import commonDrawer from 'common/common-drawer'
import wx from '../wx'
import weixin from 'weixin-js-sdk'
import { getBrandHall, getVideo } from 'api/home-api'
export default {
  data () {
    return {
      tittle: '我的目录',
      num: 0,
      showRight: false,
      liConHeight: 50, // 两行文字的高度
      brand_hall: [],
      catalog: [], // 目录
      catalog_content: [], // 目录内容
      video: [], // 视频
      ymtitle: ''
    }
  },
  created() {
    var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    this.ymtitle = user['app_name']
    this.getBrandHall()
    this.getVideo()
  },
  methods: {
    // ...mapMutations({
    //   setNum: 'SET_NUM'
    // }),
    handleisflag (value) {
      console.log(value)
      var datasrc = JSON.parse(JSON.stringify(this.catalog))
      datasrc.map((item) => {
        if (value === item.id) {
          item.isclick = true
        } else {
          item.isclick = false
        }
      })
      this.catalog = datasrc
      this.catalog_content.map((item, index) => {
        if (index === value) {
          Vue.set(item, 'openFlag', true)
        } else {
          Vue.set(item, 'openFlag', false)
        }
      })
      this.showRight = false
      var id = '#celltab_' + value
      setTimeout(() => {
        document.querySelector(id).scrollIntoView()
      }, 100)
    },
    // 目录的打开和关闭
    open(item, i) {
      if (!item.openFlag) {
        Vue.set(item, 'openFlag', true)
      } else {
        Vue.set(item, 'openFlag', false)
      }
    },
    // 获取品牌馆
    getBrandHall () {
      // var param = { 'app_id': localStorage.getItem('app_id') }
      var param = { 'app_id': JSON.parse(localStorage.getItem('user'))['app_id'] }
      getBrandHall(param).then(response => {
        var data = response.data
        this.brand_hall = data.brand_hall
        this.catalog_content = data.catalog_content
        var arr = []
        data.catalog.map((item, index) => {
          if (index === 0) {
            arr.push({
              id: index,
              name: item,
              isclick: true
            })
          } else {
            arr.push({
              id: index,
              name: item,
              isclick: false
            })
          }
        })
        this.catalog = arr
        console.log(this.catalog)
      }).catch(err => {
        console.log(err)
      })
    },
    getVideo () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      var param = { 'app_id': user['app_id'] }
      getVideo(param).then(response => {
        var data = response.data
        this.video = data
      }).catch(err => {
        console.log(err)
      })
    },
    // 点击视频
    handlevideo (value) {
      this.$router.togo('/lookvideo?id=' + value.id)
    },
    // 点击目录的图片
    handimg (e) {
      if (e.target.nodeName === 'IMG') {
        console.log(e.target.currentSrc)
        weixin.ready(function() {
          weixin.previewImage({
            'urls': [e.target.currentSrc],
            'current': e.target.currentSrc
          })
        })
      }
    }
  },
  components: {
    commonDrawer,
    wx
  },
  computed: {
    // ...mapGetters([
    //   'number'
    // ]),
    // ...mapState({
    //   number: state => state.home.number
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.mulu_box{
  .swiper_box{
    width: 100%;
    .h(422);
    .mint-swipe{
      img{
        background-image: url();
        background-color: hsla(0,0%,59%,.1);
        background-repeat: no-repeat;
        background-position: 50%;
        overflow: hidden;
        background-size: 40%;
        width: 100%;
        height: 100%;
      }
    }
  }
  .video_box{
    overflow: hidden;
    .mt(40);
    .h(248);
    .video_content{
      text-align: left;
      overflow: hidden;
      overflow-x: scroll;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      .lh(248);
      .h(288);
    }
    .video_nav{
      .w(300);
      .h(248);
      display: inline-block;
      .mr(20);
      .video_nav_top{
        width: 100%;
        .h(188);
        position: relative;
        img{
          width: 100%;
          height: 100%;
          background:rgba(237,237,237,1);
          .b-radius(12);
        }
        .play{
          .w(70);
          .h(70);
          display: inline-block;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background-size: 100%;
          background-image: url("../../assets/share/play.png");
        }
      }
      p{
        .mt(20);
        .h(40);
        .fs(28);
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(70,70,70,1);
        .lh(40);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .video_nav:first-child{
      .pl(30)
    }
    .video_nav:last-child{
      .pr(20);
    }
  }
  .cell_tab{
    width: 92.23%;
    margin: 0 auto;
    .mt(60);
    position: relative;
    img{
      width: 100%;
      .b-radius(12);
    }
    p{
      .fs(28);
      color: #555;
      .lh(50);
      .mt(20);
      overflow: hidden;
      transition: height .3s;
      text-align: left;
    }
    .mask{
      .h(116);
      background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff);
      position: absolute;
      left: 0;
      .bottom(-2);
      width: 100%;
      span{
        display: inline-block;
        .mt(10);
        position: absolute;
        bottom: 0;
        .w(32);
        .h(32);
        // .mt(10);
        transform: rotate(180deg);
        background: url("../../assets/share/top.png") no-repeat center;
        background-size: 100%;
      }
    }
    .open{
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1{
        .h(50);
        .fs(40);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(39,39,39,1);
        .lh(50);
        letter-spacing:1px;
        position: relative;
        span{
          width: 3.2rem;
          height: 0.16rem;
          background: -webkit-gradient(linear, left top, right top, from(#f83f43), to(rgba(255, 79, 79, 0.06)));
          background: linear-gradient(90deg, #f83f43 0%, rgba(255, 79, 79, 0.06) 100%);
          border-top-right-radius: 2.66666667rem;
          border-bottom-right-radius: 2.66666667rem;
          display: block;
          position: absolute;
          .bottom(4);
          left: 0px;
          opacity: 0.36;
        }
      }
      div{
        .fs(30);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(164,164,164,1);
        .lh(56);
      }
      .zhankai{
        .w(96);
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        span{
          display: inline-block;
          .w(32);
          .h(32);
          // .mt(10);
          transform: rotate(180deg);
          background: url("../../assets/share/top.png") no-repeat center;
          background-size: 100%;
        }
      }
      .shousuo{
        .w(96);
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        span{
          display: inline-block;
          .w(32);
          .h(32);
          background: url("../../assets/share/top.png") no-repeat center;
          background-size: 100%;
        }
      }
    }
    .h_auto{
      height: auto;
    }
    .h208{
      .h(208);
    }
  }

  .mulu{
    .h(56);
    .fs(40);
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(39,39,39,1);
    .lh(56);
    letter-spacing:2px;
    .mt(38);
    .mb(60);
    position: relative;
    .mulu_close{
      .w(36);
      .h(36);
      display: inline-block;
      position: absolute;
      .left(30);
      .top(12);
      background: url("../../assets/share/close.png") no-repeat center;
      background-size: 100%;
    }
  }
  .mulu_btn{
    position: fixed;
    .right(-2);
    top: 50%;
    transform: translate(0px, -50%);
    .w(138);
    .h(60);
    background:rgba(248,63,67,1);
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.23);
    .btl-radius(30);
    .bbl-radius(30);
    .fs(30);
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    .lh(50);
    padding: 0px;
    span{
      .w(30);
      display: inline-block;
      .h(24);
      .mr(8);
      background: url("../../assets/share/list.png") no-repeat left center;
      background-size: cover;
    }
  }
  .empty{
    width: 100%;
    .h(120);
  }
}
</style>
